<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    使用组件标签时 如何实现项组件内部传递参数
    props   接收组件传参
       1.  数组形式  数组中的元素是组件标签中编写的属性名
       2.  对象声明    默认值  数据类型   必填项

       props中的限制都是警告级别  不会影响整体的渲染

    父组件 -> 子组件    props    单向数据流
    子组件 -> 父组件    自定义事件

-->
<div id="app">
    <blog :title="title" :count="count"></blog>
</div>

<script>
    /*博客组件*/
    let blog = {
        template: `
          <div>
            <h2>{{ title }}</h2>
            <h2>浏览量:{{ count }}</h2>
          </div>
        `,
        // 类型限定
        // props: {
        //     title: String,
        //     count: Number
        // }
         props: {
            title: {
                type:String,
                required:true   // 声明title参数必须传递
            },
            count:{
                type:Number,
                default:0   //  声明默认值
            }
        }
    }
    let vm = new Vue({
        el: '#app',
        data: {
            title: "vm博客标题1",
            count: 10
        },
        components: {
            blog
        }
    })


</script>


</body>
</html>